<template>
    <div class="rec-weather">
        <div class="text">
            <h3>当前位置近期天气</h3>
        </div>
        <div class="content">
            <div class="day-data">
                <div class="today">
                    <span>今天</span>
                    <span>{{ store.date[0] }}</span>
                    <span>{{ store.dayWeather[0] }}</span>
                    <span>风力 {{ store.cloudPower[0] }} 级</span>
                </div>
                <div class="tomorrow">
                    <span>明天</span>
                    <span>{{ store.date[1] }}</span>
                    <span>{{ store.dayWeather[1] }}</span>
                    <span>风力 {{ store.cloudPower[1] }} 级</span>
                </div>
                <div class="Day-afterTom">
                    <span>周{{ store.week[2] }}</span>
                    <span>{{ store.date[2] }}</span>
                    <span>{{ store.dayWeather[2] }}</span>
                    <span>风力 {{ store.cloudPower[2] }} 级</span>
                </div>
                <div class="TheDay-afterTom">
                    <span>周{{ store.week[3] }}</span>
                    <span>{{ store.date[3] }}</span>
                    <span>{{ store.dayWeather[3] }}</span>
                    <span>风力 {{ store.cloudPower[3] }} 级</span>
                </div>
            </div>
            <div class="charts"><v-chart :option="option1"></v-chart></div>
            <div class="charts"><v-chart :option="option2"></v-chart></div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import { useStore } from '../store/store';

const store = useStore();
const option1 = ref(null);
const option2 = ref(null);

// 监听数据改变
watch(() => [store.dayTemp, store.nightTemp], ([dayTemp, nightTemp]) => {
    if (dayTemp.length > 0 && nightTemp.length > 0) {
        store.renderChart(option1, dayTemp, '白天', 'lightblue');
        store.renderChart(option2, nightTemp, '夜晚', 'green');
    }
});

</script>

<style scoped lang="scss">
.rec-weather {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;

    .text {
        width: 1120px;

        h3 {
            margin: 10px;
            font-size: 20px;
        }
    }

    .content {
        height: 450px;
        width: 1120px;
        background-color: rgb(0, 78, 113);

        .day-data {
            display: flex;
            justify-content: space-around;
            gap: 20px;
            margin: 10px;

            .today,
            .tomorrow,
            .Day-afterTom,
            .TheDay-afterTom {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 20px;
                gap: 5px
            }

            span {
                padding: 10px;
            }
        }

        .charts {
            height: 80px;
            margin-top: 30px;
        }
    }
}
</style>
